from dash import html, Input, Output, callback
import dash_bootstrap_components as dbc
from views.dash_bootstrap_basic_html.accordion import accordion_html
from views.dash_bootstrap_basic_html.alert import alert_html
from views.dash_bootstrap_basic_html.badges import badge_html
from views.dash_bootstrap_basic_html.breadcrumb import breadcrumb_html
from views.dash_bootstrap_basic_html.button import button_html
from views.dash_bootstrap_basic_html.cards import cards_html
from views.dash_bootstrap_basic_html.collapse import collapse_html
from views.dash_bootstrap_basic_html.dropdownMenu import dropdownMenu_html
from views.dash_bootstrap_basic_html.fade import fade_html
from views.dash_bootstrap_basic_html.forms import forms_html
from views.dash_bootstrap_basic_html.input import input_html



from views.dash_bootstrap_basic_html.listGroup import list_group
from views.dash_bootstrap_basic_html.table import table_html
from views.dash_bootstrap_basic_html.carousel import carousel_html

dash_bootstrap_basic_html = html.Div(
    children=[
        html.P(html.Strong('Dash Bootstrap控件是Plotly Dash的Bootstrap组件库, '
                           '它使构建具有复杂、响应式布局的风格一致的应用变得更容易。', style={'color': 'rgb(13, 103, 180)'}),),
        html.P(html.P('Tabs一个具有Bootstrap样式的自包含选项卡组件, '
                      '以下是使用Tabs为基础介绍Dash Bootstrap的常见控件用法', style={'color': 'rgb(30, 30, 30)'}),),
        dbc.Tabs(
            children=[
                dbc.Tab(label='折叠列表', tab_id='accordion'),
                dbc.Tab(label='信息提示框', tab_id='alert'),
                dbc.Tab(label='徽章图标', tab_id='badges'),
                dbc.Tab(label='面包屑导航', tab_id='breadcrumb'),
                dbc.Tab(label='按钮', tab_id='button'),
                dbc.Tab(label='卡片', tab_id='cards'),
                dbc.Tab(label='轮播图', tab_id='carousel'),
                dbc.Tab(label='折叠面板', tab_id='collapse'),
                dbc.Tab(label='下拉菜单', tab_id='dropdownMenu'),
                dbc.Tab(label='淡入淡出', tab_id='fade'),
                dbc.Tab(label='表单', tab_id='forms'),
                dbc.Tab(label='输入框', tab_id='input'),
                
                
                
                dbc.Tab(label='Table', tab_id='tab_1'),
                dbc.Tab(label='ListGroup', tab_id='tab_2'),
                
            ],
            id='tabs123',
            active_tab='accordion'
        ),
        html.Div(id='content_test'),
    ]
)

@callback(Output('content_test', 'children'), [Input('tabs123', 'active_tab')])
# @app.callback(Output('content_test', 'children'), [Input('tabs123', 'active_tab')])
def switch_tab(at):
    if at == 'accordion':
        return accordion_html
    elif at == 'alert':
        return alert_html
    elif at == 'badges':
        return badge_html
    elif at == 'breadcrumb':
        return breadcrumb_html
    elif at == 'button':
        return button_html
    elif at == 'cards':
        return cards_html
    elif at == 'carousel':
        return carousel_html
    elif at == 'collapse':
        return collapse_html
    elif at == 'dropdownMenu':
        return dropdownMenu_html
    elif at == 'fade':
        return fade_html
    elif at == 'forms':
        return forms_html
    elif at == 'input':
        return input_html
    
    
    elif at == 'tab_1':
        return table_html
    elif at == 'tab_2':
        return list_group
    
    return html.P("这个是不应该显示的")

